import React, { Component } from 'react';
import { Div } from './style';
class Notfound extends Component {
    state = {
        n: 5,
        timer: null
    }
    componentDidMount(){
        this.state.timer && clearInterval(this.state.timer)
        this.state.timer = setInterval(()=>{
            this.setState(state=>({
                n: state.n - 1
            }))
            if(this.state.n <= 0){
                this.props.history.push('/')
            }
        },1000)
    }
    componentWillUnmount(){
        this.state.timer && clearInterval(this.state.timer)
    }
    render() {
        return (
            <Div>
                <h1>404 Error Page</h1>
                <div className="dao">
                    {this.state.n}秒后返回首页
                </div>
                <section className="error-container">
                    <span className="four"><span className="screen-reader-text">4</span></span>
                    <span className="zero"><span className="screen-reader-text">0</span></span>
                    <span className="four"><span className="screen-reader-text">4</span></span></section>
            </Div>
        );
    }
}

export default Notfound;
